<template>
	<div class="textarea">
		<el-input type="textarea" :rows="rows" :maxlength="limit" placeholder="请输入内容" @input="countLength" v-model="textareaValue"></el-input>
		<span :class="{limit: true, danger: limit == textareaLength}">{{ textareaLength }}/{{ limit }}</span>
	</div>
</template>

<script>
export default {
	props: ['rows', 'value', 'limit'],
	data() {
		return {
			textareaValue: '',//当前文本域的内容
			textareaLength: 0//当前文本域的内容长度
		};
	},
	created: function() {
		this.textareaValue = this.value//父组件的值放到子组件上
		this.textareaLength = this.value.length//计算父组件值的长度
	},
	methods: {
		/*计算文本域的长度*/
		countLength(){
			this.textareaLength = this.textareaValue.length
			this.$emit('changeTextarea', this.textareaValue)//父组件追加上传的图片
		},
		/*父组件直接调用此方法，设置文本域的值*/
		initDescribe(v){
			this.textareaValue = v
			this.textareaLength = this.textareaValue.length
		}
	}
};
</script>

<style lang="stylus" scoped>
.textarea
	.limit
		font-size: 10px
		position: absolute
		bottom: -2px
		right: 15px
	.danger
		color: #f56c6c
</style>